<template>
  <el-card class="box-card" style="height: 400px;width: 800px;margin-left: 80px; margin-top: 100px;">
    <div class="container" ref="myElement">
      <div style="display: flex; align-items: center;">
        <el-button type="primary">{{ question.type == 'choice' ? '单选题': '多选题' }}</el-button>
        <div style="font-weight: bold; white-space: wrap; margin-left: 10px;"><span v-if="is_rush" style="font-weight: bold;color: red;">（抢答题）</span>{{ index + 1 }}.{{ question.question }} &nbsp({{ question.score }}分)</div>  
      </div>
      <div class="radio-container">
        <el-radio-group :data="tableData" v-model="radio" class="vertical-radios">
          <el-radio :label="3" class="custom-radio-button">{{ question.optionA }}</el-radio>
          <el-radio :label="6" class="custom-radio-button">{{ question.optionB }}</el-radio>
          <el-radio :label="9" class="custom-radio-button">{{ question.optionC }}</el-radio>
          <el-radio :label="12" class="custom-radio-button">{{ question.optionD }}</el-radio>
        </el-radio-group>
      </div>
      <div class="an-niu">
        <el-row class="mb-4">
          <el-button type="primary" @click="nextQuestion()">下一题</el-button>
          <el-button type="success" @click="open1">发布题目</el-button>
          <el-button type="danger" @click="open2">停止发布</el-button>
          <div style="display: flex; align-items: center; margin-left: 13px; font-weight: bold">
            <el-button @click="show" type="primary">显示答案</el-button>
            &nbsp &nbsp &nbsp
            <p v-if="showAnswer">本题答案是：{{ question.answer }}</p>
          </div>
        </el-row>
      </div>
    </div>
  </el-card>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus'
const radio = ref(null)
export default {
  data() {
    var index = 0
    var tableData = []
    var question = {}
    return {
      radio,
      tableData,
      question,
      index,
      showAnswer: false, // 初始状态下不显示答案
    }
  },
  mounted() {
    axios.get("http://1.12.77.253:8080/teacher/question").then((result) => {
      console.log(result)
      this.tableData = result.data
      this.question = this.tableData[this.index]
      // 根据后端返回的is_rush值设置is_rush数据属性
      this.is_rush = result.data[this.index].rush;
    });


  },
  methods: {
    nextQuestion() {
      if (this.index < this.tableData.length - 1) {
        this.index++
        this.question = this.tableData[this.index];
        this.showAnswer = false;
        this.is_rush = this.tableData[this.index].rush;
      } else {
        ElMessage({
          message: '注意！这是最后一道题目！',
          type: 'warning',
        })
        // 防止索引继续增加
        return
      }
    },
    open1() {
      // 发布题目接口
      axios.put("http://1.12.77.253:8080/teacher/publish/start/"+this.question.id).then((result2) => {
        console.log("发布题目接口",result2.data)
        let code = result2.data.code

        if (code === 1) {
          ElMessage({
            message: '发布题目成功!',
            type: 'success',
          })
        } else {
          ElMessage({
            message: '发布题目失败!',
            type: 'error',
          })
        }
      });

    },
    open2() {
    // 停止答题接口
    axios.put("http://1.12.77.253:8080/teacher/publish/stop/" + this.question.id).then((result3) => {
      console.log("停止答题接口",result3.data)
      let code = result3.data.code

      if (code === 1) {
        ElMessage({
          message: '停止发布成功.',
          type: 'success',
        })
      } else {
        ElMessage({
          message: '停止发布失败.',
          type: 'error',
        })
      }
    })
    },
    show(){
      this.showAnswer = !this.showAnswer; // 点击按钮时切换showAnswer的值
    }
  }
}
</script>

<style scoped>

.container {
  /* 防止子元素换行 */
  white-space: nowrap;
}

.container>* {
  /* 设置为行内块级元素 */
  display: inline-block;
  /* 添加一些边距 */
  margin-right: 5px;
}

.radio-container {
  display: block;
}

.vertical-radios {
  display: flex;
  /* flex-direction: column; */
  justify-content: flex-start;
  margin-top: 10px;
  margin-left: 20px;
  margin-right: 605px;
  margin-bottom: 50px;
  size: 10px;
}


.el-radio:last-child {
  margin-right: 34px;
}

.custom-radio-button {
  margin-top: 10px;
  /* 根据需要调整这个数值 */
}

.mb-4 {
  margin-left: 30px;
}
</style>